<template>
  <div class="orderstatistcs-main">
    <div class="orderstatistcs-head">
      <el-date-picker
        value-format="yyyy-MM-dd HH:mm:ss"
        v-model="searchdate"
        type="datetimerange"
        align="right"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <div class="btn">
        <el-button :disabled="dis" @click="clickSearch">查询</el-button>
      </div>
    </div>
    <div id="charts"></div>
  </div>
</template>

<script>
import * as ecs from "echarts";
import { $_ordertotal } from "@/apis/echarts";
import { getChinatime } from "@/utils/utils";
export default {
  data() {
    return {
      searchdate: ["2020-06-04 17:30:00", "2020-06-04 17:33:00"],
      dis: false,
    };
  },
  mounted() {
    this.mye = ecs.init(document.getElementById("charts"));
  },
  methods: {
    clickSearch() {
      this.dis = true;
      setTimeout(() => {
        this.dis = false;
      }, 1500);
      $_ordertotal({ date: JSON.stringify(this.searchdate) }).then((res) => {
        this.mye.setOption({
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              crossStyle: {
                color: "#999",
              },
            },
          },
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ["line", "bar"] },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
          legend: {
            data: ["销售额", "销售额(折线)"],
          },
          xAxis: [
            {
              type: "category",
              data: res.data.data.map((obj) => getChinatime(obj.orderTime)),
              axisPointer: {
                type: "shadow",
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "Precipitation",
              min: 0,
              max: 140,
              interval: 20,
              axisLabel: {
                formatter: "{value} 元",
              },
            },
            {
              type: "value",
              name: "Temperature",
              min: 0,
              max: 140,
              interval: 20,
              axisLabel: {
                formatter: "{value} 元",
              },
            },
          ],
          series: [
            {
              name: "销售额",
              type: "bar",
              data: res.data.data.map((obj) => obj.orderAmount),
            },
            {
              name: "销售额(折线)",
              type: "line",
              yAxisIndex: 1,
              data: res.data.data.map((obj) => obj.orderAmount),
            },
          ],
        });
      });
    },
  },
};
</script>

<style lang='less' scoped>
.orderstatistcs-main {
  background-color: #fff;
  .orderstatistcs-head {
    display: flex;
    align-items: center;
    .btn {
      margin-left: 15px;
    }
  }
  #charts {
    width: 800px;
    height: 500px;
  }
}
</style>